import * as React from 'react';
import { BrowserRouter as Router,withRouter,RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom'
// import createBrowserHistory from 'history/createBrowserHistory';


//按需加载 路由插件
// import asyncComponent from './asyncComponent'

//按需加载的组件
let Home = React.lazy(() => import('../pages/home/home'));
let Getstart = React.lazy(() => import('../pages/getstart/getstart'));
let Api = React.lazy(() => import('../pages/api/api'));
let About = React.lazy(() => import('../pages/about/about'));
let User = React.lazy(() => import('../pages/user/user'));
let Topic = React.lazy(() => import('../pages/topic/topic'));
let Me = React.lazy(() => import('../pages/me/me'));
let Licode = React.lazy(() => import('../pages/licode/licode'));
let Err404 = React.lazy(() => import('../components/err404/err404'));
let Myinfo = React.lazy(() => import('../pages/myinfo/myinfo'));
let MyRedux = React.lazy(() => import('../pages/redux/todoList'));
let Testui = React.lazy(() => import('../pages/testui/testui'));
let Myjs = React.lazy(() => import('../pages/myjs/myjs'));
let Where = React.lazy(() => import('../pages/where/where'));
let Ts = React.lazy(() => import('../pages/ts/ts'));
let Cart = React.lazy(() => import('../pages/cart/cart'));

let PrivateRoute = React.lazy(() => import('../components/privateRoute/privateRoute'));


//生成一个实例对象 历史记录什么的
// const history = createBrowserHistory();

//加载的过渡动画
let Loading =()=>{
  return (
    <div>{/* loading */}</div>
  )
}

class RouterMap extends React.Component {
  render() {
    return (
      // <Router history={history}>
      <Router basename="/blog">
        <Switch>
            <React.Suspense fallback={<Loading/>}>
              <Route exact path="/" component={Home} />
              {/* <Route exact path="/" component={MyRedux} /> */}
              <Route path="/getstart" component={Getstart} />
              <Route path="/api" component={Api} />
              <Route path="/about" component={About} />
              <Route path="/user" component={User} />
              <Route path="/me" component={Me} />
              <Route path="/licode" component={Licode} />
              <Route path="/topic/:id" component={Topic} />
              <Route path="/myredux" component={MyRedux} />
              <Route path="/myjs" component={Myjs} />
              <Route path="/where" component={Where} />
              <Route path="/ts" component={Ts} />
              <Route path="/cart" component={Cart} />
              <Route path="/404" component={Err404} />
              {/* 路由权限控制,实现具体类似套了一个高阶组件 */}
              <PrivateRoute path="/myinfo" component={Myinfo} /> 
              <Route path="/testui" component={Testui} />
              {/* <Redirect to="/" /> */}
            </React.Suspense>
        </Switch>
      </Router>
    );
  }
}

//返回了 connect 其实是一个容器组件
export default RouterMap; 
